<template>
  <view class="container">
    <view class="title">
      {{ chapterName }}
    </view>
    <view class="content">
      <view class="box">
        <view class="box_title">
          <text>听词拼写小闯关</text>
        </view>
        <view class="word">
          <view class="word_content">
            <view class="word_icon" @click="play()">
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <view class="text">
          <text class="text_box" v-show="isShowWordMeaning">{{
            wordParaphrase
          }}</text>
          <view class="text_content">
            <text @click="wordMeaningSwitch()">{{ wordMeaningText }}词义</text>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="section">
          <view class="input">
            <input type="text" placeholder="在此输入" v-model.trim="answer" />
          </view>
          <view class="switch">
            <text>软键盘</text>
            <u-switch
              v-model="isShowKeyboard"
              active-color="#f6c512"
              inactive-color="#0091ea"
              size="24"
            ></u-switch>
          </view>
        </view>
        <view class="keyboard">
          <Keyboard
            v-show="isShowKeyboard"
            ref="keyboard"
            :word="wordText"
            @updateAnswer="updateAnswer"
            @answerInformation="answerInformation"
          ></Keyboard>
        </view>
      </view>
    </view>
    <view class="button">
      <view class="button_content" v-if="!isSubmit" @click="nextQuestion()">
        <text>下一题</text>
      </view>
      <view class="button_content" v-else @click="submit()">
        <text>提交</text>
      </view>
    </view>
    <u-mask :show="isShowPopup" :zoom="false">
      <view class="popup_container" v-if="!isPass">
        <view class="popup_img">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/cry.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="popup_score">
          <text class="active">{{ score }}</text
          ><text>分</text>
        </view>
        <view class="popup_txt">很遗憾 ! 未过关 , 解锁失败。</view>
        <view class="popup_button">
          <view class="popup_button_content" @click="handleClose()">
            <text>关闭</text>
          </view>
        </view>
      </view>
      <template v-else>
        <view class="popup_container" v-if="hasGold">
          <view class="popup_img">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="popup_score">
            <text class="active">{{ score }}</text
            ><text>分</text>
          </view>
          <view class="popup_txt">
            恭喜您 ! 已过关 , 解锁成功 , 奖励金币{{ goldNum }}个。
          </view>
          <view class="popup_button">
            <view class="popup_button_content" @click="handleClose()">
              <text>关闭</text>
            </view>
          </view>
        </view>
        <view class="popup_container" v-else>
          <view class="popup_img">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="popup_score">
            <text class="active">{{ score }}</text
            ><text>分</text>
          </view>
          <view class="popup_txt">恭喜您，已过关。</view>
          <view class="popup_button">
            <view class="popup_button_content" @click="handleClose()">
              <text>关闭</text>
            </view>
          </view>
        </view>
      </template>
    </u-mask>
    <u-mask :show="isShowTestPopup" :zoom="false">
      <view class="popup_container">
        <view class="popup_img">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="popup_txt">恭喜您！本单元已学习结束。</view>
        <view class="popup_tips">
          提示：须进行单元测试，才可解锁下一单元。
        </view>
        <view class="popup_tips">提示：接下来进行单词小闯关</view>
        <view class="popup_button">
          <view class="popup_button_content" @click="startTesting()">
            <text>开始测试</text>
          </view>
        </view>
      </view>
    </u-mask>
    <Tips :show="showTips" :content="tipsContent"></Tips>
  </view>
</template>

<script>
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  props: {
    chapterData: {
      type: Object,
      default: null,
    },
    wordList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    answer() {
      this.inputWord();
    },
  },
  created() {
    this.initData();
  },
  data() {
    return {
      chapterName: "",
      wordData: null,
      wordText: "",
      wordParaphrase: "",
      wordMeaningText: "显示",
      currentWordIndex: 0,
      correctNumber: 0,
      correctList: [],
      isCorrect: false,
      isShowWordMeaning: false,
      isShowKeyboard: true,
      answer: "",
      isSubmit: false,
      isCanClick: true,
      isShowPopup: false,
      isShowTestPopup: true,
      score: 0,
      passScore: 80,
      totalScore: 100,
      isPass: false,
      hasGold: false,
      goldNum: 0,
      showTips: false,
      tipsContent: "请输入拼写单词！",
    };
  },
  methods: {
    initData() {
      this.chapterName = this.chapterData.shortName;
      this.wordData = this.wordList[this.currentWordIndex];
      this.wordText = this.wordData.word;
      this.wordParaphrase = this.wordData.wordParaphrase;
      this.wordAudio = this.wordData.wordAudio;
      this.isSubmit =
        this.currentWordIndex === this.wordList.length - 1 ? true : false;
      this.play();
    },
    initWord() {
      this.currentWordIndex++;
      this.isCorrect = false;
      this.answer = "";
      this.isCanClick = true;
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordAudio;
      englishAudioContext.play();
    },
    nextQuestion() {
      if (this.isCanClick) {
        const value = this.handleAnswer();
        if (value) {
          this.initWord();
          this.initData();
        }
      }
    },
    submit() {
      if (this.isCanClick) {
        const value = this.handleAnswer();
        if (value) {
          this.score = parseInt(
            (this.totalScore / this.wordList.length) * this.correctNumber
          );
          this.isPass = this.score >= this.passScore ? true : false;
          if (this.isPass) {
            this.$emit("save");
          } else {
            this.handlePopup();
          }
        }
      }
    },
    handleAnswer() {
      if (!this.answer) {
        this.showTips = true;
        setTimeout(() => {
          this.showTips = false;
        }, 2000);
        return false;
      }
      this.$refs.keyboard.checkRightAndWrong(this.answer);
      return true;
    },
    updateAnswer(answer) {
      this.answer = answer.join("");
    },
    answerInformation(flag) {
      this.isCorrect = flag;
      if (flag) {
        this.correctNumber++;
        this.correctList.push(this.wordList[this.currentWordIndex].id);
      }
    },
    inputWord() {
      this.$refs.keyboard.checkLetter(this.answer.split(""));
    },
    wordMeaningSwitch() {
      this.isShowWordMeaning = !this.isShowWordMeaning;
      this.wordMeaningText = this.wordMeaningText === "显示" ? "隐藏" : "显示";
    },
    startTesting() {
      this.isShowTestPopup = false;
    },
    handlePopup(flag, num) {
      if (flag && num) {
        this.hasGold = flag;
        this.goldNum = num;
      }
      this.isShowPopup = true;
    },
    handleClose() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordTest.scss";
</style>
